<template>
  <div class="home-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">信用logo</div>
      <nav class="nav">
        <ul>
          <li><a href="/">首页</a></li>
          <li><a href="/life">信用生活</a></li>
          <li><a href="/business">信用商务</a></li>
          <li><a href="/news">新闻资讯</a></li>
          <li><a href="/management">信用管理</a></li>
        </ul>
      </nav>
      <div class="login">
        <a href="/login">登录</a>
      </div>
    </header>

    <!-- 主体内容 -->
    <section class="main-content">
      <!-- 轮播图区域 -->
      <div class="carousel">
        <div class="carousel-item">
          <h1>以诚信为本</h1>
          <p>构建更加可信的未来</p>
        </div>
      </div>

      <!-- 分数构成 -->
      <div class="score-composition">
        <h2>分数构成</h2>
        <div class="composition-grid">
          <div class="item">
            <p>生活用信</p>
          </div>
          <div class="item">
            <p>基本信息</p>
          </div>
          <div class="item">
            <p>消费行为</p>
          </div>
          <div class="item">
            <p>社会信用</p>
          </div>
        </div>
      </div>

      <!-- 新闻资讯 -->
      <div class="news-section">
        <h2>新闻资讯</h2>
        <div class="news-list">
          <div class="news-item">
            <img src="/image/news.png" alt="news" />
            <h3>城市信用分守护信用激励互认联盟</h3>
            <p>2023年8月8日</p>
          </div>
          <div class="news-item">
            <h3>杭州市信用监测管理合作协议</h3>
            <p>2023年8月8日</p>
          </div>
          <div class="news-item">
            <h3>助推信用商圈“雷锋周”正式上线</h3>
            <p>2023年8月8日</p>
          </div>
          <div class="news-item">
            <h3>回归十三五：杭州市“钱江十条”</h3>
            <p>2023年8月8日</p>
          </div>
        </div>
        <button class="load-more">更多新闻</button>
      </div>
    </section>

    <!-- 底部链接 -->
    <footer class="footer">
      <div class="links">
        <a href="#">版权声明</a>
        <a href="#">隐私政策</a>
        <a href="#">法律声明</a>
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
export default {
  name: "HomePage"
};
</script>

<style scoped>
.home-page {
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #1e4fe3;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav ul {
  display: flex;
  gap: 20px;
}

.nav ul li {
  list-style: none;
}

.nav ul li a {
  text-decoration: none;
  color: white;
}

.login a {
  text-decoration: none;
  color: white;
  padding: 10px 15px;
  background-color: #4caf50;
  border-radius: 5px;
}

.main-content {
  padding: 20px;
}

.carousel {
  background-image: url('carousel-image.jpg');
  background-size: cover;
  height: 300px;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item h1 {
  font-size: 40px;
}

.carousel-item p {
  font-size: 18px;
}

.score-composition {
  margin-top: 40px;
  text-align: center;
}

.composition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.composition-grid .item {
  background-color: #e0f7fa;
  padding: 20px;
  border-radius: 10px;
}

.news-section {
  margin-top: 40px;
}

.news-section h2 {
  font-size: 24px;
  text-align: center;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.news-item {
  background-color: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
}

.news-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

.load-more {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.load-more:hover {
  background-color: #45a049;
}

.footer {
  background-color: #1e4fe3;
  color: white;
  padding: 10px;
  text-align: center;
}

.footer .links a {
  margin: 0 10px;
  text-decoration: none;
  color: white;
}

.footer .links a:hover {
  text-decoration: underline;
}
</style>
